<template>
  <div style="padding-top: 20px;">
    <!-- <el-divider content-position="left">打印机设置</el-divider> -->
    <el-row :gutter="20">
      <el-col :span="24">
        <el-form ref="myform" :model="formItem" :rules="rules" label-width="140px" size="mini">
          <el-form-item label="打印机地址" prop="ip">
            <el-input v-model="formItem.ip" placeholder="127.0.0.1" />
          </el-form-item>
          <el-form-item label="打印机端口" prop="port">
            <el-input v-model="formItem.port" placeholder="1801" />
          </el-form-item>
          <el-form-item label="所属部门" prop="departmentCode">
            <treeselect
              v-model="formItem.departmentCode"
              :multiple="false"
              :options="availableOganizations"
              :disable-branch-nodes="true"
              placeholder="请选择管理部门"
            />
          </el-form-item>
          <el-form-item label="标签标题" prop="labelTitle">
            <el-input v-model="formItem.labelTitle" placeholder="标签标题" />
          </el-form-item>
          <el-form-item label="标签左边距" prop="leftMargin">
            <el-input-number v-model="formItem.leftMargin" :precision="1" :step="0.1" :max="100" />
          </el-form-item>
          <el-form-item label="">
            <div class="tip">
              <p>打印机网络必须在同一局域网内</p>
            </div>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { create, update, get } from '@neu/dcam-ui/api/printer'
import belongs from '@neu/dcam-ui/mixins/belongs'
import { tree as orgTree } from '@neu/auth-ui/api/organization'

// 定义一个表单原始项
const formItem = {
  id: '',
  ip: '127.0.0.1',
  port: 1808,
  belongs: '',
  departmentCode: null,
  labelTitle: '',
  leftMargin: 0
}

export default {
  name: 'PrinterConfigForm',
  mixins: [belongs],
  props: {
    // 根据id可判断是新建还是更新
    id: {
      required: false,
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      formItem: {
        ...formItem
      },
      // 表单验证规则
      rules: {
        ip: [
          { required: true, message: '打印机IP地址不能为空', trigger: 'blur' }
        ],
        port: [
          { required: true, message: '打印机端口不能为空', trigger: 'blur' }
        ],
        departmentCode: [
          { required: true, message: '所属部门不能为空', trigger: 'blur' }
        ],
        labelTitle: [
          { required: true, message: '标签标题不能为空', trigger: 'blur' }
        ]
      },
      /** 使用部门 */
      availableOganizations: []
    }
  },
  watch: {
    // 监控id的变化，初始化表单数据
    id: {
      handler() {
        if (this.id > -1) {
          this.fetch()
        }
      },
      immediate: true
    }
  },
  created() {
    orgTree(this.belongs).then(response => {
      this.availableOganizations = [response.data]
    })
  },
  methods: {
    // 初始化表单数据
    fetch() {
      get(this.id).then(response => {
        const data = response.data ? response.data : formItem
        this.formItem = {
          ...data
        }
      })
    },
    // 保存操作，返回promise，后续处理交由调用者处理
    save() {
      const updated = this.id !== -1
      return new Promise(resolve => {
        this.$refs.myform.validate((valid) => {
          this.formItem.belongs = this.belongs
          if (valid) {
            if (updated) {
              resolve(update(this.id, this.formItem))
            } else {
              resolve(create(this.formItem))
            }
          } else {
            resolve(false)
          }
        })
      })
    },
    reset() {
      this.$refs.myform.resetFields()
    }
  }
}
</script>

<style>
  .tip {
    padding: 8px 16px;
    background-color: #ecf8ff;
    border-radius: 4px;
    border-left: 5px solid #50bfff;
    margin: 0 0;
  }
</style>
